<template>
    <div class="jx-content">
        <div class="navBox">
            <span class="reportTemplate templateCheck">实验课报告模版</span>
            <span class="testTemplate ">实验考试报告模版</span>
        </div>
        <div class="titleBox">
            <i></i>Word版本
        </div>
        <div class="fileUploadBox">
            <button class="button-style uploadBtn">上 传</button>
            <span v-html="fileName"></span>
            <i class="iconfont icon-shanchu"></i>
            <i class="iconfont icon-xiazai"></i>
        </div>
         <div class="titleBox">
            <i></i>在线编辑版本
        </div>
        <mavonEditor ref="me"></mavonEditor>
        <div class="saveBox">
            <button @click="getHtml" class="button-style saveBtn">保 存</button>
        </div>

    </div>
</template>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
.navBox{
    text-align: center;
    margin-bottom: 18px;
    span{
        display: inline-block;
        height: 30px;
    }
    .templateCheck{
        border-bottom:2px solid $yBlue;
        color: $yBlue;
    }
    .reportTemplate{
        margin-right: 162px;
    }
}
.titleBox{
    height: 18px;
    position: relative;
    line-height: 18px;
    color: $yBlue;
    padding-left: 40px;
    font-weight: bold;
    margin-bottom: 30px;
    i{
        width: 2px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 3px;
        background: $yBlue;
        margin-right: 40px;
    }
}
.button-style{
    padding: 0;
    height: 32px;
    width: 90px;
}
.iconfont{
    color: $yBlue;
    cursor: pointer;
}
.uploadBtn{
    margin-right: 30px;
}
.fileUploadBox{
    margin-bottom: 40px;
}
.saveBox{
    text-align: center;
    margin-top: 20px;
}
</style>
<script>
import mavonEditor from "../../../components/mavonEditor";
    export default{
        components: { mavonEditor },
        data(){
            return{
                fileName:"hadoop实验报告",
                fileHtml:''
            }
        },
        methods:{
          getHtml(){
                let renders = this.$refs.me.renders;
                console.log(renders);
                this.fileHtml = renders;
          },
        }
    }
</script>
